<template>
  <view class="merchant-entry-page">
    <!-- 顶部导航栏 -->
    <view class="custom-nav-bar">
      <view class="nav-left" @click="navBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-title">商家入驻</view>
      <view class="nav-right" @click="showHelp">
        <text class="help-icon">?</text>
      </view>
    </view>

    <!-- 入驻流程指引 -->
    <view class="process-guide">
      <view class="process-title">入驻流程</view>
      <view class="process-steps">
        <view class="process-step" :class="{ active: currentStep >= 1 }">
          <view class="step-number">1</view>
          <view class="step-name">填写基本信息</view>
        </view>
        <view class="process-line" :class="{ active: currentStep >= 2 }"></view>
        <view class="process-step" :class="{ active: currentStep >= 2 }">
          <view class="step-number">2</view>
          <view class="step-name">上传资质证明</view>
        </view>
        <view class="process-line" :class="{ active: currentStep >= 3 }"></view>
        <view class="process-step" :class="{ active: currentStep >= 3 }">
          <view class="step-number">3</view>
          <view class="step-name">审核与签约</view>
        </view>
        <view class="process-line" :class="{ active: currentStep >= 4 }"></view>
        <view class="process-step" :class="{ active: currentStep >= 4 }">
          <view class="step-number">4</view>
          <view class="step-name">入驻成功</view>
        </view>
      </view>
    </view>

    <!-- 表单容器 -->
    <view class="form-container">
      <!-- 步骤1：基本信息 -->
      <view class="form-step" v-if="currentStep === 1">
        <view class="form-title">基本信息</view>
        
        <view class="form-group">
          <view class="form-label required">商家名称</view>
          <view class="form-control">
            <input 
              v-model="merchantInfo.name" 
              placeholder="请输入商家全称"
              maxlength="50"
            />
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">商家类型</view>
          <view class="form-control">
            <picker 
              v-model="merchantInfo.typeIndex" 
              :range="merchantTypes"
              @change="onTypeChange"
            >
              <view class="picker-view">
                {{ merchantTypes[merchantInfo.typeIndex] || '请选择商家类型' }}
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">联系人姓名</view>
          <view class="form-control">
            <input 
              v-model="merchantInfo.contactName" 
              placeholder="请输入联系人姓名"
              maxlength="20"
            />
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">联系电话</view>
          <view class="form-control">
            <input 
              v-model="merchantInfo.contactPhone" 
              placeholder="请输入联系电话"
              type="number"
              maxlength="11"
            />
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">联系邮箱</view>
          <view class="form-control">
            <input 
              v-model="merchantInfo.contactEmail" 
              placeholder="请输入联系邮箱"
              type="email"
              maxlength="50"
            />
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label">商家简介</view>
          <view class="form-control">
            <textarea 
              v-model="merchantInfo.description" 
              placeholder="请简要介绍商家情况（200字以内）"
              maxlength="200"
              rows="4"
            ></textarea>
            <view class="word-count">{{ merchantInfo.description.length }}/200</view>
          </view>
        </view>
      </view>
      
      <!-- 步骤2：资质证明 -->
      <view class="form-step" v-if="currentStep === 2">
        <view class="form-title">资质证明</view>
        <view class="form-tips">
          请上传清晰的资质证明图片，支持JPG、PNG格式，大小不超过5MB
        </view>
        
        <view class="form-group">
          <view class="form-label required">营业执照</view>
          <view class="form-control upload-control">
            <view class="upload-area" @click="chooseImage('businessLicense')" v-if="!merchantInfo.businessLicense">
              <view class="upload-icon">+</view>
              <view class="upload-text">点击上传营业执照</view>
            </view>
            <view class="preview-image" v-if="merchantInfo.businessLicense">
              <image 
                :src="merchantInfo.businessLicense" 
                mode="aspectFill"
              ></image>
              <view class="delete-btn" @click="deleteImage('businessLicense')">×</view>
            </view>
            <view class="upload-desc">需包含营业执照注册号、法人信息，清晰可见</view>
          </view>
        </view>
        
        <view class="form-group" v-if="merchantInfo.typeIndex === 0">
          <view class="form-label required">法人身份证正面</view>
          <view class="form-control upload-control">
            <view class="upload-area" @click="chooseImage('idCardFront')" v-if="!merchantInfo.idCardFront">
              <view class="upload-icon">+</view>
              <view class="upload-text">点击上传身份证正面</view>
            </view>
            <view class="preview-image" v-if="merchantInfo.idCardFront">
              <image 
                :src="merchantInfo.idCardFront" 
                mode="aspectFill"
              ></image>
              <view class="delete-btn" @click="deleteImage('idCardFront')">×</view>
            </view>
          </view>
        </view>
        
        <view class="form-group" v-if="merchantInfo.typeIndex === 0">
          <view class="form-label required">法人身份证反面</view>
          <view class="form-control upload-control">
            <view class="upload-area" @click="chooseImage('idCardBack')" v-if="!merchantInfo.idCardBack">
              <view class="upload-icon">+</view>
              <view class="upload-text">点击上传身份证反面</view>
            </view>
            <view class="preview-image" v-if="merchantInfo.idCardBack">
              <image 
                :src="merchantInfo.idCardBack" 
                mode="aspectFill"
              ></image>
              <view class="delete-btn" @click="deleteImage('idCardBack')">×</view>
            </view>
          </view>
        </view>
        
        <view class="form-group" v-if="merchantInfo.typeIndex === 1">
          <view class="form-label required">企业法人身份证</view>
          <view class="form-control upload-control">
            <view class="upload-area" @click="chooseImage('legalPersonId')" v-if="!merchantInfo.legalPersonId">
              <view class="upload-icon">+</view>
              <view class="upload-text">点击上传企业法人身份证</view>
            </view>
            <view class="preview-image" v-if="merchantInfo.legalPersonId">
              <image 
                :src="merchantInfo.legalPersonId" 
                mode="aspectFill"
              ></image>
              <view class="delete-btn" @click="deleteImage('legalPersonId')">×</view>
            </view>
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label">其他资质证明</view>
          <view class="form-control upload-control">
            <view class="upload-area" @click="chooseImage('otherCert')" v-if="!merchantInfo.otherCert">
              <view class="upload-icon">+</view>
              <view class="upload-text">点击上传其他资质证明（可选）</view>
            </view>
            <view class="preview-image" v-if="merchantInfo.otherCert">
              <image 
                :src="merchantInfo.otherCert" 
                mode="aspectFill"
              ></image>
              <view class="delete-btn" @click="deleteImage('otherCert')">×</view>
            </view>
            <view class="upload-desc">如行业许可证、资质认证等</view>
          </view>
        </view>
      </view>
      
      <!-- 步骤3：审核与签约 -->
      <view class="form-step" v-if="currentStep === 3">
        <view class="form-title">审核与签约</view>
        
        <view class="agreement-section">
          <view class="agreement-title">服务协议</view>
          <view class="agreement-content">
            <scroll-view class="agreement-scroll" scroll-y>
              <text class="agreement-text">
                欢迎您申请成为本平台合作商家，为了维护双方合法权益，特签订本协议...
                （此处省略详细协议内容）
                商家应保证所提供的所有信息真实有效，如存在虚假信息，平台有权终止合作并追究相关责任...
                平台将在收到申请后3-5个工作日内完成审核，审核通过后将通过短信和邮件通知商家...
                商家入驻后需遵守平台相关规定，平台有权对违规行为进行处理...
              </text>
            </scroll-view>
          </view>
          
          <view class="agreement-confirm">
            <checkbox 
              v-model="agreementAccepted" 
              color="#165DFF"
            ></checkbox>
            <text class="confirm-text">我已阅读并同意以上协议内容</text>
          </view>
        </view>
        
        <view class="review-notice">
          <view class="notice-icon">⚠️</view>
          <view class="notice-content">
            <view class="notice-title">审核须知</view>
            <view class="notice-list">
              <view class="notice-item">1. 提交申请后，我们将在3-5个工作日内完成审核</view>
              <view class="notice-item">2. 审核结果将通过短信和邮件通知您</view>
              <view class="notice-item">3. 如有疑问，请联系客服热线：400-123-4567</view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 步骤4：入驻成功 -->
      <view class="form-step success-step" v-if="currentStep === 4">
        <view class="success-icon">✓</view>
        <view class="success-title">入驻申请提交成功！</view>
        <view class="success-desc">
          您的申请已提交至平台审核，我们将在3-5个工作日内完成审核，
          结果将通过短信和邮件通知您，请留意相关信息。
        </view>
        
        <view class="success-actions">
          <button class="action-btn check-btn" @click="checkApplicationStatus">
            查看申请状态
          </button>
          <button class="action-btn back-btn" @click="navToHome">
            返回首页
          </button>
        </view>
      </view>
    </view>

    <!-- 步骤导航按钮 -->
    <view class="form-actions" v-if="currentStep < 4">
      <button 
        class="action-btn prev-btn" 
        @click="prevStep"
        v-if="currentStep > 1"
      >
        上一步
      </button>
      <button 
        class="action-btn next-btn" 
        @click="nextStep"
        :disabled="!canProceed"
      >
        {{ currentStep < 3 ? '下一步' : '提交申请' }}
      </button>
    </view>

    <!-- 帮助弹窗 -->
    <u-popup 
      :show="helpPopup" 
      mode="center" 
	  @close="helpPopup = false"
      :mask-click="false"
    >
      <view class="help-dialog">
        <view class="dialog-title">商家入驻帮助</view>
        <view class="dialog-content">
          <view class="help-item">
            <view class="help-question">Q：入驻需要哪些条件？</view>
            <view class="help-answer">A：个体工商户或企业均可申请入驻，需提供有效的营业执照等相关资质。</view>
          </view>
          <view class="help-item">
            <view class="help-question">Q：审核需要多长时间？</view>
            <view class="help-answer">A：提交申请后，我们将在3-5个工作日内完成审核。</view>
          </view>
          <view class="help-item">
            <view class="help-question">Q：入驻是否需要费用？</view>
            <view class="help-answer">A：平台暂不收取入驻费用，交易时会收取一定比例的服务费。</view>
          </view>
        </view>
        <button class="dialog-close-btn" @click="closeHelp">我知道了</button>
      </view>
    </u-popup>
  </view>
</template>

<script>

export default {
 
  data() {
    return {
      // 当前步骤
      currentStep: 1,
      helpPopup:false,
      // 商家类型选项
      merchantTypes: ['个体工商户', '企业'],
      
      // 商家信息表单
      merchantInfo: {
        name: '',
        typeIndex: 0,
        contactName: '',
        contactPhone: '',
        contactEmail: '',
        description: '',
        businessLicense: '',
        idCardFront: '',
        idCardBack: '',
        legalPersonId: '',
        otherCert: ''
      },
      
      // 协议同意状态
      agreementAccepted: false
    };
  },
  
  computed: {
    // 判断是否可以进入下一步
    canProceed() {
      if (this.currentStep === 1) {
        // 验证基本信息
        return this.merchantInfo.name && 
               this.merchantInfo.contactName && 
               this.merchantInfo.contactPhone && 
               this.merchantInfo.contactEmail &&
               /^1[3-9]\d{9}$/.test(this.merchantInfo.contactPhone) &&
               /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.merchantInfo.contactEmail);
      } else if (this.currentStep === 2) {
        // 验证资质证明
        if (!this.merchantInfo.businessLicense) return false;
        
        // 个体工商户需要身份证正反面
        if (this.merchantInfo.typeIndex === 0) {
          return this.merchantInfo.idCardFront && this.merchantInfo.idCardBack;
        }
        
        // 企业需要法人身份证
        if (this.merchantInfo.typeIndex === 1) {
          return this.merchantInfo.legalPersonId;
        }
        
        return true;
      } else if (this.currentStep === 3) {
        // 验证协议同意
        return this.agreementAccepted;
      }
      
      return false;
    }
  },
  
  methods: {
    // 返回上一页
    navBack() {
      uni.navigateBack({ delta: 1 });
    },
    
    // 显示帮助弹窗
    showHelp() {
      this.helpPopup = true;
    },
    
    // 关闭帮助弹窗
    closeHelp() {
      this.helpPopup = false;
    },
    
    // 上一步
    prevStep() {
      if (this.currentStep > 1) {
        this.currentStep--;
        // 滚动到顶部
        uni.pageScrollTo({ scrollTop: 0, duration: 300 });
      }
    },
    
    // 下一步/提交
    nextStep() {
      if (!this.canProceed) return;
      
      if (this.currentStep < 3) {
        this.currentStep++;
        // 滚动到顶部
        uni.pageScrollTo({ scrollTop: 0, duration: 300 });
      } else {
        // 提交申请
        this.submitApplication();
      }
    },
    
    // 提交申请
    submitApplication() {
      uni.showLoading({ title: '提交中...' });
      
      // 模拟API提交
      setTimeout(() => {
        uni.hideLoading();
        // 提交成功，进入下一步
        this.currentStep++;
      }, 1500);
    },
    
    // 商家类型变更
    onTypeChange(e) {
      this.merchantInfo.typeIndex = e.detail.value;
      
      // 类型变更时清空相关图片
      if (this.merchantInfo.typeIndex === 0) {
        this.merchantInfo.legalPersonId = '';
      } else {
        this.merchantInfo.idCardFront = '';
        this.merchantInfo.idCardBack = '';
      }
    },
    
    // 选择图片
    chooseImage(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          
          // 检查图片大小（模拟，实际应在服务端验证）
          uni.getFileInfo({
            filePath: tempFilePath,
            success: (fileInfo) => {
              // 限制5MB
              if (fileInfo.size > 5 * 1024 * 1024) {
                uni.showToast({
                  title: '图片大小不能超过5MB',
                  icon: 'none',
                  duration: 2000
                });
                return;
              }
              
              // 保存图片路径
              this.merchantInfo[type] = tempFilePath;
            }
          });
        }
      });
    },
    
    // 删除图片
    deleteImage(type) {
      this.merchantInfo[type] = '';
    },
    
    // 查看申请状态
    checkApplicationStatus() {
      uni.navigateTo({ url: '/pages/business/application-status' });
    },
    
    // 返回首页
    navToHome() {
      uni.reLaunch({ url: '/pages/index/index' });
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary-color: #165DFF;
$primary-dark: #0E42D2;
$primary-light: #E8F3FF;
$accent-color: #D4AF37;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$background: #F5F7FA;
$card-bg: #FFFFFF;
$border-color: #E5E6EB;
$success-color: #00B42A;
$warning-color: #FAAD14;

.merchant-entry-page {
  background-color: $background;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-top: var(--status-bar-height);
}

// 自定义导航栏
.custom-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: $card-bg;
  border-bottom: 1px solid $border-color;
  
  .nav-left, .nav-right {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .back-icon {
    font-size: 45rpx;
    color: $text-primary;
  }
  
  .help-icon {
    width: 36rpx;
    height: 36rpx;
    background-color: $primary-light;
    color: $primary-color;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    font-weight: bold;
  }
  
  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: $text-primary;
  }
}

// 入驻流程指引
.process-guide {
  background-color: $card-bg;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .process-title {
    font-size: 28rpx;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 25rpx;
    text-align: center;
  }
  
  .process-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0 10rpx;
  }
  
  .process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    width: 20%;
    
    .step-number {
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      background-color: $border-color;
      color: $text-tertiary;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      font-weight: 600;
      margin-bottom: 10rpx;
    }
    
    .step-name {
      font-size: 22rpx;
      color: $text-tertiary;
      text-align: center;
      white-space: nowrap;
    }
    
    &.active {
      .step-number {
        background-color: $primary-color;
        color: #fff;
        box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.3);
      }
      
      .step-name {
        color: $primary-color;
        font-weight: 500;
      }
    }
  }
  
  .process-line {
    flex: 1;
    height: 4rpx;
    background-color: $border-color;
    position: relative;
    z-index: 1;
    
    &.active {
      background-color: $primary-color;
    }
  }
}

// 表单容器
.form-container {
  padding: 0 20rpx 120rpx;
  
  .form-step {
    background-color: $card-bg;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
  }
  
  .form-title {
    font-size: 30rpx;
    font-weight: 600;
    color: $text-primary;
    padding-bottom: 25rpx;
    border-bottom: 1px solid $border-color;
    margin-bottom: 25rpx;
  }
  
  .form-tips {
    font-size: 24rpx;
    color: $text-tertiary;
    background-color: #FFF7E6;
    padding: 15rpx 20rpx;
    border-radius: 10rpx;
    margin-bottom: 30rpx;
    line-height: 1.5;
  }
  
  .form-group {
    margin-bottom: 30rpx;
    
    .form-label {
      display: block;
      font-size: 26rpx;
      color: $text-primary;
      margin-bottom: 12rpx;
      font-weight: 500;
      
      &.required::after {
        content: '*';
        color:#fff;
        margin-left: 5rpx;
      }
    }
    
    .form-control {
      position: relative;
      
      input, textarea {
        width: 100%;
        padding: 20rpx;
        background-color: $background;
        border: 1px solid $border-color;
        border-radius: 12rpx;
        font-size: 26rpx;
        color: $text-primary;
        box-sizing: border-box;
      }
      
      textarea {
        min-height: 140rpx;
        resize: none;
        padding-top: 15rpx;
      }
      
      input::placeholder, textarea::placeholder {
        color: $text-tertiary;
      }
      
      .word-count {
        position: absolute;
        right: 20rpx;
        bottom: 15rpx;
        font-size: 22rpx;
        color: $text-tertiary;
      }
    }
  }
  
  // 上传控件样式
  .upload-control {
    .upload-area {
      width: 100%;
      height: 200rpx;
      border: 2rpx dashed $border-color;
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: $background;
      margin-bottom: 10rpx;
      
      .upload-icon {
        font-size: 50rpx;
        color: $text-tertiary;
        margin-bottom: 15rpx;
      }
      
      .upload-text {
        font-size: 24rpx;
        color: $text-tertiary;
      }
    }
    
    .preview-image {
      width: 100%;
      height: 200rpx;
      border-radius: 12rpx;
      overflow: hidden;
      position: relative;
      margin-bottom: 10rpx;
      
      image {
        width: 100%;
        height: 100%;
      }
      
      .delete-btn {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        width: 40rpx;
        height: 40rpx;
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
      }
    }
    
    .upload-desc {
      font-size: 22rpx;
      color: $text-tertiary;
      line-height: 1.4;
    }
  }
  
  // 选择器样式
  .picker-view {
    width: 100%;
    padding: 20rpx;
    background-color: $background;
    border: 1px solid $border-color;
    border-radius: 12rpx;
    font-size: 26rpx;
    color: $text-primary;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .picker-arrow {
      color: $text-tertiary;
      font-size: 24rpx;
    }
  }
  
  // 协议部分
  .agreement-section {
    margin-bottom: 30rpx;
    
    .agreement-title {
      font-size: 26rpx;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 15rpx;
    }
    
    .agreement-content {
      border: 1px solid $border-color;
      border-radius: 12rpx;
      overflow: hidden;
      margin-bottom: 20rpx;
      
      .agreement-scroll {
        height: 300rpx;
        padding: 20rpx;
        background-color: $background;
        
        .agreement-text {
          font-size: 24rpx;
          color: $text-secondary;
          line-height: 1.6;
        }
      }
    }
    
    .agreement-confirm {
      display: flex;
      align-items: center;
      
      checkbox {
        transform: scale(0.8);
        margin-right: 10rpx;
      }
      
      .confirm-text {
        font-size: 24rpx;
        color: $text-secondary;
      }
    }
  }
  
  // 审核须知
  .review-notice {
    background-color: #F0F7FF;
    border-radius: 12rpx;
    padding: 20rpx;
    display: flex;
    
    .notice-icon {
      font-size: 36rpx;
      color: $primary-color;
      margin-right: 15rpx;
      margin-top: 5rpx;
    }
    
    .notice-content {
      flex: 1;
      
      .notice-title {
        font-size: 26rpx;
        font-weight: 600;
        color: $primary-color;
        margin-bottom: 15rpx;
      }
      
      .notice-list {
        .notice-item {
          font-size: 24rpx;
          color: $text-secondary;
          margin-bottom: 10rpx;
          line-height: 1.5;
          position: relative;
          padding-left: 25rpx;
          
          &::before {
            content: '';
            position: absolute;
            left: 8rpx;
            top: 18rpx;
            width: 6rpx;
            height: 6rpx;
            border-radius: 50%;
            background-color: $text-tertiary;
          }
        }
      }
    }
  }
  
  // 成功页面
  .success-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx 30rpx;
    text-align: center;
    
    .success-icon {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background-color: rgba(0, 180, 42, 0.1);
      color: $success-color;
      font-size: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30rpx;
    }
    
    .success-title {
      font-size: 34rpx;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 20rpx;
    }
    
    .success-desc {
      font-size: 26rpx;
      color: $text-secondary;
      line-height: 1.6;
      margin-bottom: 40rpx;
      padding: 0 20rpx;
    }
    
    .success-actions {
      display: flex;
      gap: 20rpx;
      width: 100%;
      
      .action-btn {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 12rpx;
        font-size: 28rpx;
        font-weight: 500;
      }
      
      .check-btn {
        background-color: $primary-color;
        color: #fff;
        border: none;
      }
      
      .back-btn {
        background-color: $background;
        color: $text-primary;
        border: 1px solid $border-color;
      }
    }
  }
}

// 表单操作按钮
.form-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: $card-bg;
  padding: 20rpx;
  display: flex;
  gap: 20rpx;
  border-top: 1px solid $border-color;
  z-index: 10;
  
  .action-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 12rpx;
    font-size: 28rpx;
    font-weight: 500;
  }
  
  .prev-btn {
    background-color: $background;
    color: $text-primary;
    border: 1px solid $border-color;
  }
  
  .next-btn {
    background-color: $primary-color;
    color: #fff;
    border: none;
    box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.25);
  }
  
  .next-btn:disabled {
    background-color: #C9CDD4;
    color: #fff;
    box-shadow: none;
  }
}

// 帮助弹窗
.help-dialog {
  width: 580rpx;
  background-color: $card-bg;
  border-radius: 20rpx;
  padding: 30rpx;
  
  .dialog-title {
    font-size: 32rpx;
    font-weight: 600;
    color: $text-primary;
    text-align: center;
    margin-bottom: 25rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid $border-color;
  }
  
  .dialog-content {
    max-height: 500rpx;
    overflow-y: auto;
    margin-bottom: 30rpx;
    
    .help-item {
      margin-bottom: 25rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    .help-question {
      font-size: 26rpx;
      font-weight: 500;
      color: $text-primary;
      margin-bottom: 8rpx;
    }
    
    .help-answer {
      font-size: 24rpx;
      color: $text-secondary;
      line-height: 1.6;
    }
  }
  
  .dialog-close-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background-color: $primary-color;
    color: #fff;
    border: none;
    border-radius: 12rpx;
    font-size: 28rpx;
    font-weight: 500;
  }
}
</style>
    